<template>
  <div class="PubTable">
    <el-table :data="tableData" @cell-click="cellClick" :border="border">
      <el-table-column
        v-if="index"
        type="index"
        label="序号"
        align="center"
        width="50">
        <template slot-scope="scope">
          <span>{{ scope.$index + (page.current - 1) * page.size + 1 }}</span>
        </template>
      </el-table-column>

      <template v-for="(item, index) in tableOption">
        <el-table-column
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :align="item.align || 'center'"
          :show-overflow-tooltip="item.overHidden || true">
          <template slot-scope="scope">
            <slot
              v-if="item.slot"
              :name="scope.column.property"
              :row="scope.row"
              :$index="scope.$index"/>
              <span v-else>{{ scope.row[scope.column.property] }}</span>
          </template>
        </el-table-column>
      </template>

      <el-table-column
        v-if="operation"
        label="操作"
        align="center">
        <template slot-scope="scope">
          <slot
            name="menu"
            :row="scope.row"
            :$index="scope.$index"/>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-show="page.total>0"
      :total="page.total"
      :page.sync="page.current"
      :limit.sync="page.size"
      @pagination="pageChange"
    />
  </div>
</template>

<script>
import Pagination from './PagiNation';
export default {
  name: 'PubTable',
  components: {
    Pagination
  },
  props: {
    // 序号
    index: {
      type: Boolean,
      default: true
    },
    // 边框
    border: {
      type: Boolean,
      default: false
    },
    // 操作列
    operation: {
      type: Boolean,
      default: false
    },
    // 列表数据
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    // 表头
    tableOption: {
      type: Array,
      default() {
        return []
      }
    },
    // 分页
    page: {
      type: Object,
      default() {
        return {
          total: 0,
          current: 1,
          page: 10
        }
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    pageChange() {
      this.$emit('page-change')
    },
    cellClick(row, column, cell, event) {
      this.$emit('click', { row, column, cell, event })
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table * {
  color: #222;
}
</style>
